<template>
  <div style="padding: 80px">
    <el-row
      ><el-radio-group v-model="radioValue">
        <el-radio label="to">to</el-radio>
        <el-radio label="from">from</el-radio>
        <el-radio label="fromTo">fromTo</el-radio>
        <el-radio label="set">set</el-radio>
      </el-radio-group></el-row
    >
    <div class="page">
      <img src="@/assets/person.png" ref="logoRef" />
      <div
        class="circle"
        ref="circleRef"
        v-for="item in arr"
        :key="item"
        :style="{ backgroundColor: item }"
      ></div>
    </div>
    <div style="margin-top: 30px"></div>
    <el-button type="primary" @click="controlObj">gsap处理数据</el-button>
    <h3>x: {{ xy.x }}</h3>
    <h3>y: {{ xy.y }}</h3>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick, reactive } from "vue";
import { gsap } from "gsap";
const radioValue = ref<"to" | "from" | "fromTo" | "set">("to");
const arr = ["#409eff", "#67c23a", "#e6a23c", "#f56c6c", "#909399"];
const logoRef = ref();
const circleRef = ref();
const xy = reactive<{ x: number; y: number }>({
  x: 0,
  y: 0,
});
const toFn = () => {
  if (!circleRef.value || !logoRef.value) return;
  //   gsap.to(logoRef.value, {
  //     duration: 1,
  //     opacity: 0,
  //     scale: 0.3,
  //     rotation: 360,
  //   });

  //   gsap.to(circleRef.value, {
  //     duration: 1,
  //     opacity: 0,
  //     y: 150,
  //     stagger: 0.15,
  //   });
};

const fromFn = () => {
  if (!circleRef.value || !logoRef.value) return;
  gsap.from(logoRef.value, {
    duration: 1,
    opacity: 0,
    scale: 0.3,
    rotation: 360,
  });

  gsap.from(circleRef.value, {
    duration: 1,
    opacity: 0,
    y: 150,
    stagger: 0.15,
  });
};

const fromToFn = () => {
  if (!circleRef.value) return;
  gsap.fromTo(
    circleRef.value,
    2, //过渡时间
    { x: -40, backgroundColor: "blue" },
    { x: 0, backgroundColor: "green" }
  );
};

const setFn = () => {
  if (!circleRef.value) return;
  for (let index = 0; index < arr.length; index++) {
    const element = circleRef.value[index];
    gsap.set(element, { backgroundColor: arr[index] });
  }
};

const controlObj = () => {
  gsap.to(xy, {
    x: 6666,
    y: 6666,
    duration: 4,
    onUpdate: () => {
      xy.x = Math.floor(xy.x);
      xy.y = Math.floor(xy.y);
    },
  });
};

watch(
  () => radioValue.value,
  (val) => {
    nextTick(() => {
      setFn();
      switch (val) {
        case "to":
          toFn();
          break;
        case "from":
          fromFn();
          break;
        case "fromTo":
          fromToFn();
          break;
        case "set":
          setFn();
          break;
        default:
          break;
      }
    });
  },
  {
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.page {
  display: flex;
  align-items: center;
  img {
    width: 200px;
  }
  .circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 80px;
  }
}
</style>

<!-- 
    1. 'gsap.to("target", {variables})'  'to': methods; 'target': 可以写.class类(.page),或者ref; 'variables': 动画信息代码;
       methods: 有四种类型：
       gsap.to: 动画结束后的操作, 
       gsap.from: 动画开始前的操作, 
       gsap.fromTo 定义开始的操作和结束的操作,
       gsap.set() 无动画定义
    2. 通过选择器选择子标签元素：  gsap.to("section > .box", { x: 200 });
    3. 通过数组选择多个元素：
       let square = document.querySelector(".square");
       let circle = document.querySelector(".circle");                             
       gsap.to([square, circle], { x: 200 })
    4. GSAP不需要DOM元素来对属性进行动画处理。你可以针对任何对象的任何属性，甚至是你像这样创建的任意属性：
       let obj = { myNum: 10, myColor: "red" };
       gsap.to(obj, {
           myNum: 200,
           myColor: "blue",
           onUpdate: () => console.log(obj.myNum, obj.myColor)
       });
    5. 重复和交替重复 repeat：循环次数； yoyo：意味着在完成后自动反转动画，并再次播放。
    gsap.to(".box", { 
        rotation: 360,
        x: '100vw',
        xPercent: -100,
        duration: 2,
        repeat: -1, // 无限重复
        yoyo: true, // this will alternate back and forth on each repeat. Like a yoyo
    });
 -->
